<!--
 * @Author: your name
 * @Date: 2021-04-15 14:42:57
 * @LastEditTime: 2021-07-29 16:09:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\todoOrder\orderList.vue
-->
<template>
  <page-layout title="我发起的">
    <div style="background: #fff;padding: 12px 24px 24px 24px;">
      <a-tabs v-model="tabKey">
        <a-tab-pane v-for="(tab,index) in tabList" :key="index" :tab="tab"></a-tab-pane>
      </a-tabs>
      <a-radio-group v-model="searchState.navType" style="margin: 0 0 16px 0">
        <span>审批类型：</span>
        <a-radio-button v-for="(item,index) in waitTypeList" :key="index" :value="index">{{ item }} </a-radio-button>
      </a-radio-group>
      <a-row type="flex" justify="space-between">
        <a-form-model layout="inline" ref="searchToDo" name="searchToDo" style="margin-bottom: 20px">
          <a-form-model-item label="申请人姓名">
            <a-input style="width:220px" v-model="searchState.applicant" placeholder="请输入申请人姓名" allow-clear>
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="审批对象">
            <a-input style="width:220px" v-model="searchState.approver" placeholder="请输入审批对象" allow-clear>
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="提交日期">
            <a-range-picker style="width:398px" :default-value="[searchState.commitBeginMonth?moment(searchState.commitBeginMonth, dateFormat):'', searchState.commitEndMonth?moment(searchState.commitEndMonth, dateFormat):'']" @change="(date, dateString)=>onChangeDate(date, dateString,0)" :placeholder="['开始日期','结束日期']">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-model-item>
          <a-form-model-item>
            <a-space :size="8">
              <a-button type="primary" icon="search" @click="onSearch">查询</a-button>
            </a-space>
          </a-form-model-item>
        </a-form-model>
        <a-button type="primary" style="margin-top:4px">撤回</a-button>
      </a-row>
      <a-table rowKey="id" :columns="columns" :data-source="dataSource" :scroll="{ x: true }" :pagination="{
                            current: searchState.pageNum,
                            pageSize: searchState.pageSize,
                            total: searchState.total,
                            onChange: onPageChange,
                        }" style="background: #fff">
        <template slot="operation" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onDetail(record)">详情</a>
        </template>
      </a-table>
    </div>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout';
import moment from 'moment';
import datas from '@/utils/data';
export default {
  name: 'comprehensiveReport',
  components: { PageLayout },
  data () {
    return {
      tabList: ['全部', '审批中', '审批通过', '审批驳回'],
      tabKey: 0,
      waitTypeList: ['供应商', '薪税请款', '社保公积金请款', 'XX报备', '审批类型'],
      dateFormat: 'YYYY-MM',
      searchState: {
        applicant: "", // 申请人
        approver: "", // 审批对象
        commitBeginMonth: "", // 提交开始日期
        commitEndMonth: "", // 提交结束日期
        navType: 0, // 状态
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      detailDrawer: false,
      columns: datas.approvalInitiateColumns,
      dataSource: [{}, {}],
    };
  },
  methods: {
    moment,
    onDetail (item) {
      this.detailDrawer = true;
    },
    onSearch () {
      console.log(this.searchState);
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.searchState.pageNum = page;
      this.searchState.pageSize = pageSize;
    },
  },
  mounted () {

  },
};
</script>

<style lang="less" scoped>
.ant-col.ant-col-4 {
  width: 180px;
}
.ant-col.ant-col-20 {
  padding: 24px;
  flex: 1;
}
// .ant-avatar.button-icon /deep/img {
//   width: 25px !important;
//   height: 25px !important;
//   margin-top: 3px !important;
// }
</style>
